<template>
	<view class="page-wrap">
		<view class="title">搜索</view>
		<view class="input-wrap" @click="naviTo">
			<!-- <image src="../../static/tabbar/搜索.png" class="image">
				
			</image> -->
			<icon type="search" size="16" class="image"/>
			<input class="input" type="text" value="" placeholder="App Store" placeholder-style="text-align:left"/>
		</view>
		<view class="kuan">
		<text class="rm">热门搜索</text>
		</view>
		
		<view class="kuan1">
		<text class="rm1">斗破苍穹</text>
		</view>
		
		<view class="kuan1">
		<text class="rm1">测距仪</text>
		</view>
		
		<view class="kuan1">
		<text class="rm1">ar尺子</text>
		</view>
		
		<view class="kuan1">
		<text class="rm1">29cm</text>
		</view>
		
		<view class="kuan1">
		<text class="rm1">邮箱</text>
		</view>
		
		<view class="kuan1">
		<text class="rm1">look book</text>
		</view>
		
		<view class="kuan2">
		<text class="rm1">方舟指令</text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			
			return {
				
			};
		},
		methods:{
			naviTo(){
				// alert('hi');
				uni.navigateTo({
				    url: "/pages/sousuo/jieguo/jieguo"
				});
			}
		}
		
	}
</script>

<style lang="scss" scoped>
.page-wrap{
	height: 100vh;
	width: 750rpx; /*px 绝对单位 rpx 相对单位 */ 
	.title{
			
			margin-top: 86rpx;
			margin-left: 40rpx;
			letter-spacing: 1px;
			color: rgba(0, 0, 0, 1);
			font-size: 68rpx;
			font-weight: bold;
	}
	.input-wrap{
	    width: 670rpx;
	  	height: 72rpx;
	  	margin:20rpx auto;
	  	background-color: rgba(242, 242, 242, 1);
	  	border-radius: 16rpx;
		display: flex;
		// justify-content: space-between;
		align-items: center;
		margin-bottom: 78rpx;
		// .placeholder{
		// 	margin-right: 5rpx;
		
		.image{
			width: 32rpx;
			height: 32rpx;
			// line-height: 32rpx;
			margin-top: 8rpx;
			margin-right: 20rpx;
			margin-left: 30rpx;
			padding-right: 19rpx;
			
			// background-color: #f2f2f2;
		}
		.input{
			color: rgba(80, 80, 80, 1);
			font-size: 28rpx;
			text-align: left;
			
		}
	}
	.kuan{
		 width: 670rpx;
		 height: 82rpx;
		 border-bottom: 2rpx solid #ececec;
		 // padding-right: 60rpx;
		 margin: auto;
	}
	.rm{
		    width: 176rpx;
			height: 66rpx;
			margin-left: 10rpx;
			margin-top: 89px;
			color: rgba(0, 0, 0, 1);
			font-size: 44rpx;
			line-height: 150%;
			text-align: left;
			font-weight: bold;
		// 	border-bottom: 2px solid #ececec;
		}
		.kuan1{
			 width: 670rpx;
			 height: 82rpx;
			 border-bottom: 2rpx solid #ececec;
			 // padding-right: 60rpx;
			 margin: auto;
			 margin-top: 20rpx;
		}
		.rm1{
			width: 176rpx;
			height: 66rpx;
			// line-height: 66rpx;
			margin-left: 10rpx;
			margin-top: 16px;
			color: #007afd;
			font-size: 44rpx;
			line-height: 150%;
			text-align: left;
			
		}
		.kuan2{
			 width: 670rpx;
			 height: 82rpx;
			 margin: auto;
			 margin-top: 20rpx;
			 }
}
</style>
